<template>
	<view>
		<!-- 聊天 wwl -->
		<chat-nav-bar :title="chat_toname" showBack />
		<scroll-view scroll-y class="scroll_view" :style="chatBodyBottom" :show-scrollbar="false"
			:scroll-into-view="scrollIntoView" :scroll-with-animation="true" @click="clickPage">
			<block v-if="chat_info && chat_info.length > 0">
				<view class="chat_box " :class='infoObj.char_type == it.char_type ? "chat_box1" :"chat_box2"'
					v-for='(it,i) in chat_info' :key='i' :id="'chatItem_'+i">
					<block v-if='it.type == 3 &&  it.content  && it.content.type == "house"'>
						<view class="house_row">
							<view class="row">
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/fangwu.png" mode="scaleToFill"></image>
								<view class="">
									{{it.content.data.all_name}}{{it.content.data.address}}
								</view>
							</view>
							<view class="row">
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/daohang.png" mode="scaleToFill"></image>
								<view class="">
									<text v-if="it.content.data.house_type">
										{{it.content.data.house_type.split(',')[0]}}室{{it.content.data.house_type.split(',')[1]}}厅{{it.content.data.house_type.split(',')[3]}}卫
									</text>
									<text class="area">{{it.content.data.centiare}}m</text>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="role">
							<!-- <image :src="userInfo.avatar" v-if='it.users_id ==  userInfo.accid' mode="scaleToFill"></image>
							<image :src="chat_to.avatar" v-else mode="scaleToFill"></image> -->
							
							<image :src="it.user_avatar" v-if='it.char_type ==  1' mode="scaleToFill"></image>
							<image :src="it.shop_avatar" v-else mode="scaleToFill"></image>
							
						</view>
						<view class="info_box" >
							<view class="input" v-if='it.type == 1' :class='infoObj.char_type == it.char_type ? "input1" :""'>
								
								{{it.content_text}}
							</view>
							<view class="image" v-else-if='it.type == 2'>
								<img :src="it.content_img" @click='$global.onPreview(it.content_img)' />
							</view>
							<!-- <view  class="video" v-else-if="it.type=='video'" @click="onPayVideo(it.file.url)">
								<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211217/vcK7h0amCZSbSlwSVjdvNgI6LVEewF2L4EUi6fGB.png" mode="scaleToFill"></image>
								<text>
									点击观看视频～
								</text>
							</view>
							<video v-else-if="it.type=='video'"  class="video" :src="it.file.url"/>
							<view class="audio" v-else-if="it.type == 'audio'"
								:style="{width: getRadioWidth(it.file.dur)}" @click="playRadioMsg(it.file.url)">
								<image src="https://xiaoqu.wuguoxin.vip/uploads/web/speaker_icon.png" mode=""></image>
								<text>{{it.file.dur | lenRadio}}</text>
							</view> -->
							<view class="" v-else-if=' it.type == 3 && it.content_jjson'>
								<view class="commodity_row" v-if="it.content_jjson.type == 'commodity'"
									@click="onCommodityPage(it.content_jjson)">
									<view class="top_box">
										<image :src="it.content_jjson.data.cover" mode="scaleToFill"></image>
									</view>
									<view class="bottom_box">
										<view class="title"
											:class="it.content_jjson.data.detailType == 'decorationMoneyExchange' ? 'title2':''">
											{{it.content_jjson.data.name }}
										</view>
										<block
											v-if='it.content_jjson.data.detailType != "decorationMoneyExchange"'>
											<view class="money_box3"
												v-if="it.content_jjson.data.detailType == 'newHouseAcceptance' || it.content_jjson.data.detailType == 'thirdPartySupervision'">
												<view class="money_row" v-if="it.content_jjson.data.amount_min">
													<text
														class="text1">¥{{it.content_jjson.data.amount_min.split('.')[0]}}.</text>
													<text
														class="text2">{{it.content_jjson.data.amount_min.split('.')[1] ? it.content_jjson.data.amount_min.split('.')[1] : '00'}}</text>
												</view>
												<text class="text_l"
													v-if="it.content_jjson.data.amount_max">~</text>
												<view class="money_row" v-if="it.content_jjson.data.amount_max">
													<text
														class="text1">¥{{it.content_jjson.data.amount_max.split('.')[0]}}.</text>
													<text
														class="text2">{{it.content_jjson.data.amount_max.split('.')[1] ? it.content_jjson.data.amount_max.split('.')[1] : '00'}}</text>
												</view>
											</view>
											<view class="money_box" v-else>
												<view class="left"
													:class="it.content_jjson.data.detailType == 'findCraftsman' ? 'left2':''">
													<view class="left_row" v-if="it.content_jjson.data.amount_x">
														<text>¥{{it.content_jjson.data.amount_x.split('.')[0]}}.</text>
														<text>{{it.content_jjson.data.amount_x.split('.')[1] ? it.content_jjson.data.amount_x.split('.')[1] : '00'}}</text>
													</view>
													<view class="left_row" v-if='it.content_jjson.data.amount_y'>
														<text>¥{{it.content_jjson.data.amount_y.split('.')[0]}}</text>
														<text>{{it.content_jjson.data.amount_y.split('.')[1] ? it.content_jjson.data.amount_y.split('.')[1] : '00' }}</text>
													</view>
												</view>
												<view class="right"
													v-if='it.content_jjson.data.detailType != "findCraftsman"'>
													月销
													{{it.content_jjson.data.sale_num ? it.content_jjson.data.sale_num : 0}}
												</view>
											</view>
											<view class="label"
												v-if=' it.content_jjson.data.tag &&  it.content_jjson.data.tag.length > 0'>
												<text v-for="(label,il) in it.content_jjson.data.tag"
													:key='il'>{{label}}</text>
											</view>
										</block>
										<view class="money_box2" v-else>
											<view class="money">
												<view class="left_row" v-if="it.content_jjson.data.amount_x">
													<text>¥{{it.content_jjson.data.amount_x.split('.')[0]}}.</text>
													<text>{{it.content.data.amount_x.split('.')[1] ? it.content.data.amount_x.split('.')[1] : '00'}}</text>
												</view>
												<view class="left_row" v-if='it.content.data.amount_y'>
													<text>¥{{it.content_jjson.data.amount_y.split('.')[0]}}</text>
													<text>{{it.content_jjson.data.amount_y.split('.')[1] ? it.content_jjson.data.amount_y.split('.')[1] : '00' }}</text>
												</view>
											</view>
											<view class="label_num"
												:class="{label_num1:!it.content_jjson.data.tag || it.content_jjson.data.tag.length ==  0,label_num2:it.content_jjson.data.tag &&  it.content_jjson.data.tag.length > 0 && it.content_jjson.data.tag[0].length <= 3,label_num3: it.content_jjson.data.tag &&  it.content_jjson.data.tag.length > 0 && it.content_jjson.data.tag[0].length > 3}">
												<view class="num">
													月销
													{{it.content_jjson.data.sale_num ? it.content_jjson.data.sale_num : 0}}
												</view>
												<view class="lable2"
													v-if=' it.content_jjson.data.tag &&  it.content_jjson.data.tag.length > 0'>
													<text>{{it.content_jjson.data.tag[0]}}</text>
												</view>
											</view>
										</view>
									</view>
								</view>
								<view class="" v-else-if='it.content_jjson.type == "offer"'>
									<offer-list  :obj='it.content_jjson.data' />
									<button v-if="infoObj.char_type == 1 " class="offer_btn" @click="onAddActuarialsheet(it.content_jjson.data.id)" :loading='addLoading'>
										加入精算单
									</button>
								</view>
							</view>
							<!-- <view class="is_ready">
											{{it.is_ready == 1 ? '已读' :'未读'}}
										</view> -->
						</view>
					</block>

				</view>
			</block>
		</scroll-view>
		<view class="" style="bottom:120px;position: fixed;right: 10px;width: 60px;height: 60px;">
			<button class="" @click="onDetail(1,null)" style="width: 50px;height: 50px;background: #ff0000;color: #ffffff;border-radius: 34px;">举报</button>
		</view>
		<view class="operation_all" :style="'bottom:'+KeyboardHeight+'px;'">
			<!-- <view class="commodity_info" v-if="chat_commodityInfo && !isCommoditySend">
				<view class="commodity">
					<view class="left">
						<image class="left" :src="chat_commodityInfo.cover" mode="scaleToFill"></image>
						<view class="info">
							<view class="">
								{{chat_commodityInfo.name}}
							</view>
							<view class="money">
								¥
								{{chat_commodityInfo.detailType == 'newHouseAcceptance' || chat_commodityInfo.detailType == 'thirdPartySupervision' ? `${chat_commodityInfo.amount_min}~${chat_commodityInfo.amount_max}`  :  chat_commodityInfo.amount_x}}
							</view>
						</view>
					</view>
					<view class="right" @click="onCommodity()">
						<text>发送给商家</text>
					</view>
					<view class="icon_btn" @click="isCommoditySend = true">
						<n-icon name="close" size="38" color="#666"></n-icon>
					</view>
				</view>
			</view> -->
			<view class="operation_row" :style="{paddingBottom: `${isIOS && KeyboardHeight == 0 ? '40rpx' : 0}`}">
				<image class="send-icon" @click="news.type = 'audio'" v-if="news.type  == 'text'"
					src="https://xiaoqu.wuguoxin.vip/uploads/web/xiaolaba.png" mode="scaleToFill"></image>
				<image class="send-icon" @click="news.type = 'text'" v-else src="https://xiaoqu.wuguoxin.vip/uploads/web/keyboard.png"
					mode="scaleToFill">
				</image>
				<view class="flex_center">
					<view v-if="news.type === 'audio'" class="audio_row" @longpress="onLongPress"
						@touchstart="recordingStart" @touchend="recordingEnd"
						:class="news.isRecording?'bg-hover-light':'bg-white'">
						<text class="font">{{news.recordingText}}</text>
					</view>
					<textarea v-else fixed class="textarea_row" :adjust-position="false" v-model="news.value"
						@focus="news.type = 'text'" />
				</view>
				<template v-if="news.value.length === 0">
					<image class="plus-icon" @click="onExtend()" src="https://xiaoqu.wuguoxin.vip/uploads/web/plus_func.png" mode="scaleToFill">
					</image>
				</template>
				<view v-else class="send_btn" @click="sendText()">
					<text>发送</text>
				</view>
			</view>
		</view>
		<chat-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false">
			<swiper v-show="news.isShowFun" class="func-list-all" indicator-active-color='#d5d5d5'
				indicator-color='#999'>
				<swiper-item class="func-list">
					<view class="func" v-for='ic in funcList' :key='ic.type' @click="funRow(ic.type)" v-if="ic.type == 2">
					
						<view class="top">
							<image :src="ic.image" mode=""></image>
						</view>
						<text>{{ic.name}}</text>
					</view>
					<view class="func" v-for='ic in funcList' :key='ic.type' @click="funRow(ic.type)" v-if="(ic.type == 3 || ic.type == 5) && (userInfo && (userInfo.type == 2 || userInfo.type == 3)  ||  userInfo.user_role_id.length > 0  && userInfo.user_role_id.indexOf(0) == -1 )">
						<view class="top">
							<image :src="ic.image" mode=""></image>
						</view>
						<text>{{ic.name}}</text>
					</view>
				</swiper-item>
				<!-- <swiper-item class="func-list">
					<view class="func"
						v-if=" userInfo && (userInfo.type == 2 || userInfo.type == 3)  ||  userInfo.user_role_id.length > 0  && userInfo.user_role_id.indexOf(0) == -1 "
						@click="funRow(funcList[4].type)">
						<view class="top">
							<image :src="funcList[4].image" mode=""></image>
						</view>
						<text>{{funcList[4].name}}</text>
					</view>
					<view class="func" @click="funRow(funcList[3].type)">
						<view class="top">
							<image :src="funcList[3].image" mode=""></image>
						</view>
						<text>{{funcList[3].name}}</text>
					</view>
				</swiper-item> -->
			</swiper>
		</chat-popup>
		<recording v-if="news.isRecording"></recording>
		<u-popup v-model="videoObj.visible" mode='center' width="100%" height="auto" :zIndex='9999' >
			<view class="video_popup">
				<view class="icon">
					<image src="http://tuzhuang-1304727035.file.myqcloud.com/20211217/5WN07zvTmGa33paaFJzrp9j8kBxs6V58GvcvckW4.png" mode="" @click="videoObj.visible = false"></image>
				</view>
				<video :src="videoObj.url"  :autoplay="true" :show-fullscreen-btn='false'	
					 class="video">
				</video>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import io from '@hyoga/uni-socket.io';
	// #ifdef APP-PLUS ||  MP-WEIXIN
	// const ws = io('wss://xiaoqu.wuguoxin.vip:8080', {
	//   query: {},
	//   transports: [ 'websocket', 'polling' ],
	//   timeout: 5000,
	// });
	//#endif
	// // #ifdef H5
	// const ws = new WebSocket("wss://xiaoqu.wuguoxin.vip:8080");
	// //#endif
	// import { ws } from '@/utils/WebSocket.js';
	import WS from "@/utils/WebSocket.js"
	
	import {setActuarialsheetAdd,getUserHouse,chatrecord_add,chatrecord_get} from "./static/api.js"
	import chatNavBar from "./chat-nav-bar.vue"
	import chatPopup from "./chat-popup.vue"
	import offerList from "./offer-list.vue"
	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	import Recording from './recording.vue'
	import uPopup from '@/components/u-popup.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			chatNavBar,
			chatPopup,
			Recording,
			offerList,
			uPopup
		},
		data() {
			return {
				ws:null,
				videoObj:{
					visible:false,
					url:''
				},
				KeyboardHeight: 0, // 键盘高度
				scrollIntoView: '',
				navBarHeight: 0,
				fixed: true,
				page: 1,
				pageSize: 30,
				funcList: [{
						image: 'https://xiaoqu.wuguoxin.vip/uploads/web/xiangce.png',
						name: '照片',
						type: 2
					},
					// {
					// 	image: 'https://xiaoqu.wuguoxin.vip/uploads/web/paizhao.png',
					// 	name: '拍摄',
					// 	type: 'camera'
					// },
					// {
					// 	image: 'https://xiaoqu.wuguoxin.vip/uploads/web/shipin.png',
					// 	name: '短视频',
					// 	type: 'video'
					// },
					// {
					// 	image: 'https://xiaoqu.wuguoxin.vip/uploads/web/fangwu01.png',
					// 	name: '房屋信息',
					// 	type: 5
					// },
					// {
					// 	image: 'https://xiaoqu.wuguoxin.vip/uploads/web/baojia.png',
					// 	name: '精算单',
					// 	type: 3
					// }
				],
				news: {
					typeList: ['text', 'audio', 'image', 'video'],
					value: '',
					type: 'text',
					isAudio: false,
					isFocus: false,
					isShowFun: false,
					isRecording: false,
					recordingText: '按住说话',
					recordingTime: 0,
					recordingEvent: null,
					bottom: 0,
				},
				isCommoditySend: false,
				receiveHouse: null,
				addLoading:false,
				
				msg:'',
				socketOpen:false,
				socketMsgQueue: [],
				SocketTask:'',
				
				type:null,
				list:[],
				total:0,
				loading:false,
				conversation_id:'',
				shopping_id:0,
				chat_toname:'',
				infoObj: {
					char_type:1,
					type:0,
					users_id:0,
					user_avatar: '',
					shop_avatar: '',
					shopping_id:0,
					content_text:'',
					content_img:'',
					content_jjson:[],
					content_goods:[]
				}
			}
		},
		mounted() {
			var statusBarHeight = this.$store.state.statusBarHeight
			// #ifdef APP-PLUS-NVUE
			statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = statusBarHeight + uni.upx2px(90)
			uni.onKeyboardHeightChange(res => {
				if (!this.news.isShowFun) {
					this.KeyboardHeight = res.height
				}
				if (this.KeyboardHeight > 0) {
					this.pageToBottom()
				}
			})
			this.pageToBottom()
		},
		computed: {
			...mapState(['chat_list','chat_info', 'chat_to', 'duanType', 'userInfo', 'defaultHouse', 'chat_commodityInfo','isIOS']),
			// 聊天区域bottom
			chatBodyBottom() {
				// `bottom:${this.isIOS ?  uni.upx2px(145) :  uni.upx2px(105)   +  (this.chat_commodityInfo && !this.isCommoditySend ? uni.upx2px(180) : 0)  + this.KeyboardHeight}px;top:${this.navBarHeight}px;`
				return `bottom:${this.isIOS  && this.KeyboardHeight == 0 ?  uni.upx2px(145) :  uni.upx2px(105)   +  (this.chat_commodityInfo && !this.isCommoditySend ? uni.upx2px(180) : 0)  + this.KeyboardHeight}px;top:${this.navBarHeight}px;`
			},
			// 获取蒙版的位置
			maskBottom() {
				return this.KeyboardHeight +  uni.upx2px(105) + (this.chat_commodityInfo && !this.isCommoditySend ? uni
					.upx2px(180) : 0)
			},
			
			length() {
				return  this.$store.state.chat_list ? this.$store.state.chat_list.length : 0
			}
		},
		watch: {
			'news.isShowFun'(nv) {
				if (!nv) this.$refs.action.hide()
			},
			'news.type'(nv) {
				this.isCommoditySend = false
				if (nv != 'text') {
					uni.hideKeyboard()
				} else {
					this.news.isShowFun = false
				}

			},
			chat_info() {
				
				this.pageToBottom();
			},
			
			chat_list: {
				handler:function(newValue, oldValue) {
					console.log(newValue,'监听消息变化')
					console.log(oldValue,'监听消息变化2')
					if (newValue.length !== oldValue.length) {
						this.getLocalChatRecord()
						// this.$IM.getUsers({
						// 	account: this.chat_list[0].to,
						// 	done: (err, obj) => {
						// 		if (!err) {
						// 			this.$set(this.chat_list[0].toAvatar,'avatar',obj.avatar)
						// 			this.$set(this.chat_list[0].toNick,'avatar',obj.nick)
						// 		}
						// 	}
						// });
					}
				},
				deep:true
			}
		},
		filters: {
			lenRadio: function(val) {
				return Number(val) <= 1000 ? 1 + "''" : parseInt(Number(val) / 1000) + "''"
			}
		},
		onLoad(option) {
			this.ws = new WS(`wss://xiaoqu.wuguoxin.vip:8080`)  // xxx 表示接口地址URL
			
			// this.ws.initEventHandle();
			
			
			this.ws.getWebSocketMsg(data => {
				const dataJson = data;
				console.log('接收的消息从服务器聊天列表', dataJson);
			    if(typeof(dataJson) == "object") {
			        console.log("wsObject", dataJson);
				}else {
			        console.log(dataJson);
					if(dataJson == "刷新消息"){
						this.getLocalChatRecord();
					}
			    }
			});
			
			// // #ifdef APP-PLUS ||  MP-WEIXIN
			// //连接connectSocket
			// // this.SocketTask = uni.getStorageSync('SocketTask', this.SocketTask);
			// this.SocketTask = uni.connectSocket({
			//   url:'wss://xiaoqu.wuguoxin.vip:8080',
			//   header: {
			//     'content-type': 'application/json'
			//   },
			//   protocols: [ 'protocol1'],
			//   timeout:60000,
			//   success: function (res) {
			//     console.log('Socket连接成功:', res);
			//   },
			//   fail: function (res) {
			//     console.error('连接失败:', res);
			//   },
			// })
			// // websocket打开
			// // uni.onSocketOpen(() => {
			// //   console.log('监听到 WebSocket 连接已打开！');
			  
			// // })
			
			// this.SocketTask.onOpen(function (res) {
			// 	console.log('监听到 WebSocket 连接已打开！');
			// 	this.socketOpen = true;
			// 	// for (var i = 0; i < this.socketMsgQueue.length; i++) {
			// 	// 	this.sendSocketMessage(this.socketMsgQueue[i]);
			// 	// }
			// 	// this.socketMsgQueue = [];
			// });
			
			// //连接失败
			// // uni.onSocketError((err) => {
			// //   console.log('websocket连接失败', err);
			// //   uni.connectSocket({
			// //     url:'wss://xiaoqu.wuguoxin.vip:8080',
			// //     header: {
			// //       'content-type': 'application/json'
			// //     },
			// //     protocols: [ 'protocol1'],
			// // 	timeout:60000,
			// //     success: function (res) {
			// //       console.log('Socket连接成功:', res);
			// //     },
			// //     fail: function (res) {
			// //       console.error('连接失败:', res);
			// //     },
			// //   })
			// // })
						 
			// // 收到websocket消息
			
			// this.SocketTask.onMessage(function (res) {
			// // wx.onSocketMessage(function (res) {
			// 	console.log(res.data,'收到服务端聊天列表');
			// 	// console.log(option.users_id,'收到服务端消息22233：');
			// 	if(res.data == '刷新消息'){
			// 		console.log(res.data,'收到服务端消息22233：');
			// 		this.getLocalChatRecord()
			// 	}
			// 	// const msg = JSON.parse(res.data) // 收到的消息为字符串，需处理一下
			// 	// console.log(msg,'收到服务端消息33：');
			// })
			// // 检测到 WebSocket 连接
			// this.SocketTask.onError(function (res) {
			//   console.log(res,'监听到 WebSocket连接报错！');
			//   this.SocketTask = uni.connectSocket({
			//     url:'wss://xiaoqu.wuguoxin.vip:8080',
			//     header: {
			//       'content-type': 'application/json'
			//     },
			//     protocols: [ 'protocol1'],
			//     timeout:60000,
			//     success: function (res) {
			//       console.log('Socket连接成功:', res);
			//     },
			//     fail: function (res) {
			//       console.error('连接失败:', res);
			//     },
			//   })
			// })
			// // 检测到 WebSocket 连接已关闭
			// this.SocketTask.onClose(function (res) {
			//   console.log('监听到 WebSocket 连接已关闭！');
			// })
			// //#endif
			// // #ifdef H5
			// // this.SocketTask = ws;
			// ws.onmessage = function(e) {
			//     console.log("收到服务端的聊天列表：" + e.data);
			// 	// console.log(option.users_id,'收到服务端消息22233：');
			// 	// if(e.data == '刷新消息'){
			// 	// 	console.log("收到服务端的聊天列表22：" + e.data);
			// 	// 	this.getLocalChatRecord()
			// 	// }
			// };
			// ws.onclose = function(e) {
			//     console.log("服务已断开2" );
			// }
			// //#endif
			
			// this.set_chat_to(null)
			if(option.char_type) this.infoObj.char_type = option.char_type;
			if(option.conversation_id) this.conversation_id = option.conversation_id;
			if(option.shopping_id) this.shopping_id = option.shopping_id;
			if(option.users_id) this.infoObj.users_id = option.users_id;
			if(option.chat_toname) this.chat_toname = option.chat_toname;
			console.log(option,'传参的')
			this.set_chat_info([])
			this.getLocalChatRecord()
			
		},
		destroyed() {
			 this.set_chat_commodityInfo(null)
			// this.set_chat_to(null)
			// this.set_chat_info([])
			// this.set_chat_commodityInfo(null)
		},
		onReady() {
			this.getLocalChatRecord()
		},
		methods: {
			sendSocketMessage(msg) {
				console.log("发送服务器消息2" );
			  if (this.socketOpen) {
			    uni.sendSocketMessage({
			      data: msg
			    });
			  } else {
			    this.socketMsgQueue.push(msg);
			  }
			},
			onDetail(status,id){
				uni.navigateTo({
					url:'/pagesMy/feedback/detail?status=' + status +'&id=' + id+'&type=2'
				})
			},
			
			onPayVideo(url){
				this.videoObj.visible = true
				this.videoObj.url = url
			},
			async onAddActuarialsheet(id){
				if(this.addLoading) return
				this.addLoading = true
				try{
					var res = await setActuarialsheetAdd({id})
					uni.showToast({title:'添加成功'})
					this.addLoading = false
				}catch{
					this.addLoading = false
				}
			},
			onCommodityPage(obj) {
				uni.navigateTo({
					url: obj.data.pageUrl
				})
			},
			clickPage() {
				this.news.type = 'text'
				this.news.isShowFun = false
			},
			onExtend() {
				this.news.isShowFun = true
				uni.hideKeyboard()
				this.$refs.action.show()
				this.KeyboardHeight = uni.upx2px(265)
			},
			pageToBottom() {
				setTimeout(() => {
					let lastIndex = this.chat_info.length - 1
					this.scrollIntoView = 'chatItem_' + lastIndex
				}, 300)
			},
			...mapMutations(['set_chat_to', 'set_chat_info', 'set_chat_commodityInfo']),
			
			//获取历史消息
			async getLocalChatRecord() {
				console.log(this.chat_to,'获取历史消息1');
				console.log(this.chat_info,'获取历史消息2');
				console.log(this.userInfo,'获取历史消息3');
				this.loading = true
				var res = await chatrecord_get({
					// users_id: this.infoObj.users_id,
					shopping_id: this.shopping_id,
					conversation_id: this.conversation_id,
					page: this.page,
					limit: this.pageSize
				})
				if(res.count > 0){
					var newObj = res.list.reverse()
					newObj.forEach(row=>{
						if(row.type == 3 ){
							row.content_jjson = JSON.parse(JSON.stringify(JSON.parse(row.content_jjson)))
						}
						this.infoObj.user_avatar = row.user_avatar;
						this.infoObj.shop_avatar = row.shop_avatar;
					})
					this.set_chat_info(newObj)
				}
				
				
				uni.hideLoading()
				this.loading = false
				
				console.log(this.$store.getters.userInfo.accid,'用户ID');
				const msg = '{"code":"102","name":"用户名称","user_id":"'+this.$store.getters.userInfo.accid+'"}';
				//workerman链接并记录个人的ID
				this.ws.webSocketSendMsg(msg)
				
				this.pageToBottom();
				return;
				
				
				this.$IM.getHistoryMsgs({
					scene: 'p2p',
					to: this.chat_to.id,
					limit: 20,
					done: (error, obj) => {
						// console.log('获取历史消息' + (!error ? '成功' : '失败!!!!'), obj)
						if (!error && obj.msgs.length > 0) {
							var newObj = obj.msgs.reverse()
							newObj.forEach(row=>{
								if(row.type == 'custom' && typeof(row.content)== "string"){
									row.content = JSON.parse(JSON.stringify(JSON.parse(row.content)))
								}
							})
							this.set_chat_info(newObj)
						}
					}
				});
			},
			searchHouse() {
				var rowList = this.chat_info.filter(x => x.content && x.content.type == 'house')
				if (rowList && rowList.length > 0) this.receiveHouse = rowList[rowList.length - 1]
			},
			async funRow(type) {
				
				// socket.on('connect', () => {
				//   // ws连接已建立，此时可以进行socket.io的事件监听或者数据发送操作
				//   // 连接建立后，本插件的功能已完成，接下来的操作参考socket.io官方客户端文档即可
				//   console.log('ws 已连接');
				//   // socket.io 唯一连接id，可以监控这个id实现点对点通讯
				//   const { id } = socket;
				//   socket.on(id, (message) => {
				//     // 收到服务器推送的消息，可以跟进自身业务进行操作
				//     console.log('ws 收到服务器消息：', message);
				//   });
				//   // 主动向服务器发送数据
				//   socket.emit('send_data', {
				//     time: +new Date(),
				//   });
				// });
				
				// socket.on('error', (msg) => {
				//   console.log('ws error', msg);
				// });
				
				//消息类型，1文字，2图片，3精算单，4商品,5房屋信息
				if (type == 'video') {
					uni.chooseVideo({
						count: 1,
						sourceType: ['camera', 'album'],
						success: (res) => {
							this.onSendFile(res.tempFilePath, type)
						}
					});

				} else if (type == 3) {
					// await this.searchHouse()
					// if (!this.receiveHouse) {
					// 	uni.showToast({
					// 		title: '请获取客户房屋',
					// 		icon: 'none'
					// 	})
					// } else {
					try{
						var isHouse = await getUserHouse(this.chat_to.id)
						this.chat_to.house = isHouse
						this.set_chat_to(this.chat_to)
						if(isHouse != -1){
							uni.navigateTo({
								url:'/pagesServiceProvider/intersection/offerCurrent?char_type='+this.infoObj.char_type+'&users_id='+this.infoObj.users_id
							})
						} else{
							uni.showToast({
								title: '当前客户没有房屋档案',
								icon: 'none'
							})
						}
					}catch{}
					
					// }
				} else if (type == 5) {
					if (this.defaultHouse) {
						this.onHouse()
					} else {
						uni.showToast({
							title: '请设置默认房屋',
							icon: 'none'
						});
					}
				} else {
					uni.chooseImage({
						// count: 6 - this.infoObj.img_url.length, //默认9
						sizeType: ['original', 'compressed'], 
						sourceType: ['album'], //从相册选择
						success: (res) => {
							uni.showLoading({mask: false})
							// this.allloading = true
							for(let i = 0 ; i <res.tempFilePaths.length ;i++){
								this.$upload(res.tempFilePaths[i]).then(result =>{
									if(result.code == 200){
										console.log(result.data.img,'发送图片a ')
										this.infoObj.content_img = result.data.img
										if(i== res.tempFilePaths.length-1 ){
											// this.allloading = false
											this.$forceUpdate()
											uni.hideLoading()
										}
										
										this.onSendFile(this.infoObj.content_img, 2)
										
									}
								})
								
							}
							
						}
					});
					
					// uni.chooseImage({
					// 	sourceType: [type],
					// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// 	success: (res) => {
					// 		const urls = res.tempFilePaths
					// 		for (let i = 0; i < urls.length; i++) {
					// 			this.onSendFile(urls[i], 2)
					// 		}
					// 	}
					// });
				}
			},
			onHouse() {
				this.onSendCustomChat({
					data: this.defaultHouse,
					type: 'house'
				})
			},
			onCommodity() {
				this.onSendCustomChat({
					type: 'commodity',
					data: this.chat_commodityInfo,
				})
			},
			onSendCustomChat(content) {
				this.$IM.sendCustomMsg({
					scene: 'p2p',
					to: this.chat_to.id,
					content: JSON.stringify(content),
					done: (error, obj) => {
						if (!error) {
							if (content.type == 'commodity') this.isCommoditySend = true
							 obj.content = JSON.parse(JSON.stringify(JSON.parse(obj.content)))
							this.set_chat_info([...this.chat_info, obj])
						}
					}
				});
			},
			//发送消息检测
			async onSave(){
				if(this.loading) return
				if (!this.$regular.funShowToast(null, this.news.value , '请填写发送内容！')) return false
				console.log(this.news.value,'发送消息发送1')
				this.onFun()
			},
			//发送消息发送
			async onFun(){
				this.loading = true
				// try{
					// this.infoObj.char_type = 1;
					this.infoObj.type = 1;
					this.infoObj.shopping_id = this.chat_to.shopping_id;
					this.infoObj.content_text = this.news.value;
					var res = await chatrecord_add({...this.infoObj})
					console.log(res,'发送消息发送')
					//跨平台通知
					if(this.infoObj.char_type == 1){
						this.msg = '{"code":"100","msg":"'+this.shopping_id+'","user_id":"'+res.shop_userid+'"}';
						
					}else if(this.infoObj.char_type == 2){
						this.msg = '{"code":"100","msg":"'+this.shopping_id+'","user_id":"'+res.users_id+'"}';
						
					}
					
					this.set_chat_info([...this.chat_info, {
						char_type: this.infoObj.char_type,
						type: this.infoObj.type,
						user_name: this.userInfo.name,
						shopping_id: this.infoObj.shopping_id,
						shop_userid: this.chat_to.id,
						users_id: this.userInfo.accid,
						user_avatar: res.user_avatar,
						shop_avatar: res.shop_avatar,
						time: Date.parse(new Date()),
						content_text: this.news.value
					}])
					console.log(this.chat_info,'发送消息发送2')
					this.$nextTick(() => {
						this.news.value = ''
					})
					
					uni.hideLoading()
					this.loading = false
					
					
					this.ws.webSocketSendMsg(this.msg)
					// // #ifdef H5
					// console.log(this.msg,'发送消息发送22')
					// ws.send(this.msg);
					// //#endif
					// // #ifdef APP-PLUS ||  MP-WEIXIN
					// console.log(this.msg,'发送消息发送21')
					// this.SocketTask.send({
					//   data:this.msg,
					//   success: function (res) {
					// 	console.log('发送成功了:', res);
					//   },
					//   fail: function (res) {
					// 	console.error('发送失败了:', res);
					//   },
					// })
					
					// // uni.sendSocketMessage({
					// //   data: this.msg
					// // });
					
					// // if (this.socketOpen) {
					  
					// // } else {
					// //   this.socketMsgQueue.push(msg);
					// // }
					// // uni.sendSocketMessage({data:this.msg})
					// //#endif
					
					
				// }catch{
				// 	console.log(this.news.value,'发送消息发送3')
				// 	uni.hideLoading()
				// 	this.loading = false
				// }
			},
			//发送消息
			sendText() {
				console.log(this.news.value,'发送消息')
				// if(!this.news.value || !this.news.value.trim()) return
				
				
				
				
				
				this.onSave()
				
				// this.$IM.sendText({
				// 	scene: 'p2p',
				// 	to: this.chat_to.id, // 被接受人的账号
				// 	text: this.news.value,
				// 	done: () => {
				// 		this.set_chat_info([...this.chat_info, {
				// 			scene: "p2p",
				// 			to: this.chat_to.id,
				// 			from: this.userInfo.accid,
				// 			time: Date.parse(new Date()),
				// 			type: 'text',
				// 			text: this.news.value
				// 		}])
				// 		this.$nextTick(() => {
				// 			this.news.value = ''
				// 		})
				// 	}
				// })
			},
			//开始录音
			recordingStart() {
				// console.log('开始录音');
			},
			// 录音结束
			recordingEnd() {
				if (!this.news.recordingTime) {
					uni.showToast({
						title: '时间太短',
						icon: 'none'
					})
					this.news.isRecording = false
					this.news.recordingText = '按住说话'
					recorderManager.stop();
					return;
				}
				this.news.isRecording = false
				this.news.recordingText = '按住说话'
				recorderManager.stop();
				recorderManager.onStop(res => {
					clearInterval(this.news.recordingEvent);
					this.onSendFile(res.tempFilePath, 'audio')
				})
			},
			
			//上传聊天记录图片
			onSendFile(url, type) {
				this.onFunimg(url, type);
				
				return;
				this.$IM.sendFile({
					scene: 'p2p',
					to: this.chat_to.id,
					type,
					filePath: url,
					uploaddone: (error, file) => {},
					beforesend: (msg) => {
						this.set_chat_info([...this.chat_info, msg])
					}
				});
			},
			//发送消息图片发送
			async onFunimg(url,type){
				this.loading = true
				try{
					console.log(url,'发送图片发送1')
					// this.infoObj.char_type = 1;
					this.infoObj.type = type;
					this.infoObj.shopping_id = this.chat_to.shopping_id;
					this.infoObj.content_img = url;
					var res = await chatrecord_add({...this.infoObj})
					console.log(res,'发送图片发送')
					
					this.set_chat_info([...this.chat_info, {
						char_type: this.infoObj.char_type,
						type: this.infoObj.type,
						user_name: this.userInfo.name,
						shopping_id: this.infoObj.shopping_id,
						shop_userid: this.chat_to.id,
						users_id: this.userInfo.accid,
						user_avatar: res.user_avatar,
						shop_avatar: res.shop_avatar,
						time: Date.parse(new Date()),
						content_img: url
					}])
					
					uni.hideLoading()
					this.loading = false
				}catch{
					uni.hideLoading()
					this.loading = false
				}
			},
			getNowDate() {
				function formDate(str) {
					if (str < 10) {
						return '0' + str
					} else {
						return String(str)
					}
				}
				let time = new Date()
				let year = time.getFullYear()
				let month = formDate(time.getMonth() + 1)
				let date = formDate(time.getDay())
				let hours = formDate(time.getHours())
				let minutes = formDate(time.getMinutes())
				let seconds = formDate(time.getSeconds())
				let nowTime = `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
				return nowTime
			},
			onLongPress() {
				// console.log('长按');
				this.news.isRecording = true
				this.news.recordingText = '松开结束'
				recorderManager.start();
				this.news.recordingTime = 0 // 清空录音时间
				recorderManager.onStart(() => {
					this.news.recordingEvent = setInterval(() => {
						this.news.recordingTime++
					}, 1000)
				});
				recorderManager.start({
					format: "mp3"
				});
			},
			sendAudio(url, dur) {
				// console.log(url, dur)
				const urls = this.$IM.audioToMp3({
					url: url
				});
				// console.log(urls, '转换之后的urlmp3');
				this.$IM.sendFile({
					scene: 'p2p',
					to: this.chat_to.id,
					type: 'audio',
					uploaddone: (error, file) => {
						if (!error) {
							this.set_chat_info([...this.chat_info, file])
						} else {
							uni.showToast({
								title: '发送失败',
								icon: 'none'
							})
						}
					},
					// beforesend: (msg)=> {
					// 	console.log('正在发送p2p image消息, id=' + msg.idClient);
					// },
					done: (res) => {
						// console.log(res, '上传语音消息结果')
					}
				});
			},
			// // 播放语音条
			playRadioMsg(url) {
				innerAudioContext.src = url
				innerAudioContext.play()
				if (innerAudioContext.paused) {
					innerAudioContext.play()
				} else {
					innerAudioContext.pause() //暂停
					innerAudioContext.onPause(() => { //暂停时调用的方法  
						innerAudioContext.startTime = innerAudioContext.currentTime
					})
				}
			},
			getRadioWidth(dur) {
				// let duration = url.split('%/dur')[1]
				let duration = Number(dur)
				if (duration == null) {
					return '50rpx'
				}
				if ((0 < duration) && (duration < 3000)) {
					return '120rpx'
				} else if ((3000 < duration) && (duration < 6000)) {
					return '170rpx'
				} else {
					return '220rpx'
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.video_popup{
		height:100vh;
		width: 750rpx;
		background-color: #000;
		position: relative;
		box-sizing: border-box;
		padding: 300rpx 0 200rpx;
		.video{
			width: 100%;
			height: 100%;
		}
		.icon{
			position: absolute;
			right: 50rpx;
			top:200rpx;
			image{
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
	
	.scroll_view {
		background-color: #fff;
		position: fixed;
		left: 0;
		right: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		bottom: 105rpx;
		box-sizing: border-box;

		.fixed_info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	.operation_all {
		position: fixed;
		left: 0;
		right: 0;
		// display: flex;
		// box-sizing: border-box;
		// align-items: center;
	}

	.operation_row {
		// position: fixed;
		// left: 0;
		// right: 0;
		padding: 0 30rpx;
		border-top: 1rpx solid #dee2e6;
		display: flex;
		align-items: center;
		background-color: #F7F7F6;
		height: 105rpx;

		.flex_center {
			flex: 1;
			padding: 0 10rpx;
			box-sizing: border-box;
		}

		.textarea_row {
			background-color: #ffffff;
			border-radius: 8rpx;
			padding: 15rpx 20rpx;
			font-size: 35upx;
			height: 80rpx;
			max-width: 500rpx;
			box-sizing: border-box;
			color: #26252A;
		}

		.audio_row {
			border-radius: 8rpx;
			display: flex;
			justify-content: align-center;
			align-items: center;
			box-sizing: border-box;
			height: 60rpx;
			justify-content: center;
			color: #26252A;
		}

		.bg-hover-light {
			background-color: #dae0e5;
		}

		.bg-white {
			background-color: #ffffff;
		}

		.send-icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		.plus-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}

		.send_btn {
			flex-shrink: 0;
			border-radius: 8rpx;
			font-size: 30upx;
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
	}

	.func-list-all {
		width: 750rpx;
		height: 265rpx;
	}

	.func-list {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #333333;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-top: 1rpx solid #C0C0C0;
		// background-color: #f6f7fb;
		background-color: #F7F7F6;
		display: flex;
		flex-direction: row;

		.func {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			>.top {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				box-sizing: border-box;
				background-color: #fff;
				box-sizing: border-box;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				margin-bottom: 20rpx;
			}

			text {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #333333;
			}



		}
	}


	.consulation {
		width: 100%;
		min-height: 100%;
		background-color: #F3F3F3;
	}


	.chat_box {
		display: flex;
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		width: 100%;
		box-sizing: border-box;

		.role image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background-color: #C0C0C0;
		}

		.info_box {
			.input {
				max-width: 500rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-radius: 12rpx;
				background-color: #fff;
				box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);
				font-size: 28rpx;
				line-height: 40rpx;
				// white-space: normal;
				word-break: break-all;
			}
			.input1{
				background-color: $theme;
				color:#fff
			}

			.image {

				image,
				img {
					max-width: 400rpx;
					max-height: 500rpx;
				}
			}

			.video {
				width: 400rpx;
				height: 300rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 20rpx;
				justify-content: center;
				background-color: #3B4144;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				text{
					color:#fff;
					font-size: 24rpx;
					margin-top: 30rpx;
				}
			}

			.audio {
				background-color: #6E9CF8;
				border-radius: 12rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				height: 80rpx;
				box-sizing: border-box;
				background: #ffffff;
				box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.12);

				image {
					display: inline-block;
					width: 33rpx;
					height: 33rpx;
				}

				text {
					margin-left: 6rpx;
					color: #26252A;
				}
			}

			.is_ready {
				text-align: left;
				margin-top: 20rpx;
				line-height: 28rpx;
				font-size: 20rpx;
				color: #ADADAD;
			}
		}
	}

	.chat_box1 {
		flex-direction: row-reverse;

		.role image {
			margin-left: 16rpx;
		}

		.info_box {
			.is_ready {
				text-align: right;
			}
		}
	}

	.chat_box2 {
		justify-content: flex-start;

		.role image {
			margin-right: 16rpx;
		}
	}

	.operation {
		width: 100%;
		background-color: #f6f7fb;
		// height: 100rpx;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom); // 核心代码
		padding-bottom: env(safe-area-inset-bottom); // 核心代码

		.input-box {
			flex: 1;
			height: 70rpx;
			border-radius: 35rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}

		.input-radio {
			flex: 1;
			height: 70rpx;
			border-radius: 35rpx;
			padding: 0 20rpx;
			line-height: 70rpx;
			text-align: center;
			color: #333333;
			background-color: #FFFFFF;
		}

		.send-icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
		}

		.plus-icon {
			width: 50rpx;
			height: 50rpx;
			margin-left: 20rpx;
		}
	}

	.func-list-all {
		width: 750rpx;
	}

	.func-list {
		width: 100%;
		background-color: pink;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background-color: #333333;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		border-top: 1rpx solid #C0C0C0;
		background-color: #f6f7fb;
		display: flex;
		flex-direction: row;

		.func {
			width: 33.3%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			>.top {
				width: 100rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				box-sizing: border-box;
				background-color: #fff;
				box-sizing: border-box;

				image {
					width: 50rpx;
					height: 50rpx;
				}

				margin-bottom: 20rpx;
			}

			text {
				font-size: 24rpx;
				color: #333333;
			}



		}
	}

	// 其他
	.commodity_info {
		width: 100%;
		padding: 20rpx 36rpx;
		box-sizing: border-box;

		.commodity {
			width: 100%;
			height: 160rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 6rpx 12rpx 0px rgba(0, 0, 0, 0.12);
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;

			.icon_btn {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				z-index: 1;
			}
		}

		.right {
			margin-top: 25rpx;
			text-align: center;
			width: 110rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: $theme;
			border-radius: 22rpx;
			font-size: 20rpx;
			color: #fff;

			text {
				transform: scale(0.8);
			}
		}

		.left {
			width: calc(100% - 170rpx);
			display: flex;
			justify-content: space-between;

			image {
				width: 104rpx;
				height: 104rpx;
			}

			.info {
				width: calc(100% - 124rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.text {
					font-size: 20rpx;
					line-height: 26rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #26252a;
					overflow: hidden;
					text-overflow: ellispsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				.money {
					font-size: 20prx;
					line-height: 28rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					text-align: left;
					color: $theme;
				}
			}
		}
	}

	.house_info {
		max-width: 100%;
		padding: 30rpx 36rpx;
		box-sizing: border-box;

		.text {
			color: #ADADAD;
			font-size: 24rpx;
			line-height: 34rpx;
			text-align: center;
		}

		.btn {
			font-weight: 700;
			margin-top: 26rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			text-align: center;
			color: $theme;
		}
	}

	.commodity_row {
		width: 326rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0px 4rpx 12rpx 0px rgba(165, 165, 165, 0.20);
		margin-top: 1em;
		-moz-page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		break-inside: avoid;
		width: 326rpx;
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0px 4rpx 12rpx 0px rgba(165, 165, 165, 0.20);

		.top_box {
			image {
				width: 326rpx;
				height: 326rpx;
			}
		}

		.bottom_box {
			background-color: #fff;
			padding: 16rpx 16rpx 26rpx;
			width: 100%;
			box-sizing: border-box;

			.title {
				color: #26252B;
				font-size: 24rpx;
				line-height: 34rpx;
				display: block;
				overflow: hidden;
				text-overflow: ellispsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.title2 {
				color: #101010;
				font-size: 24rpx;
				line-height: 34rpx;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.money_box3 {
				margin-top: 16rpx;
				display: flex;
				justify-content: flex-start;

				.money_row {
					display: inline-block;
				}

				.text1 {
					font-size: 28rpx;
					line-height: 44rpx;
					color: #FE0200;
				}

				.text2 {
					font-size: 22rpx;
				}

				.text_l {
					margin: 0 5rpx;
				}
			}

			.money_box {
				margin-top: 16rpx;
				display: flex;
				justify-content: space-between;

				// align-items: center;
				.left2 {
					width: 100%;
				}

				.left {
					width: calc(100% - 4em);
					color: #FE0200;

					.left_row {
						display: inline-block;
					}

					>view:nth-child(1) {
						font-size: 28rpx;
						line-height: 44rpx;
						color: #FE0200;

						>text:nth-child(2) {
							font-size: 22rpx;
						}
					}

					>view:nth-child(2) {
						font-size: 22rpx;
						line-height: 44rpx;
						color: #ADADAD;
						margin-left: 16rpx;
						text-decoration: line-through;

						>text:nth-child(2) {
							font-size: 20rpx;
						}
					}

					&:last-child {
						>view:nth-child(1) {
							font-size: 24rpx;

							>text:nth-child(2) {
								font-size: 20rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 20rpx;
						}
					}
				}

				.right {
					text-align: right;
					color: #ADADAD;
					font-size: 22rpx;
					line-height: 44rpx;
				}
			}

			.money_box2 {
				margin-top: 16rpx;

				.money {
					.left_row {
						display: inline-block;
					}

					>view:nth-child(1) {
						font-size: 28rpx;
						line-height: 44rpx;
						color: #FE0200;

						>text:nth-child(2) {
							font-size: 22rpx;
						}
					}

					>view:nth-child(2) {
						font-size: 22rpx;
						line-height: 44rpx;
						color: #ADADAD;
						margin-left: 16rpx;
						text-decoration: line-through;

						>text:nth-child(2) {
							font-size: 20rpx;
						}
					}

					&:last-child {
						>view:nth-child(1) {
							font-size: 24rpx;

							>text:nth-child(2) {
								font-size: 20rpx;
							}
						}

						>view:nth-child(2) {
							font-size: 20rpx;
						}
					}
				}

				.label_num {
					.num {
						color: #ADADAD;
						font-size: 22rpx;
						line-height: 44rpx;
					}

					.lable2 {
						text {
							display: inline-block;
							padding: 2rpx 4rpx;
							line-height: 24rpx;
							border-radius: 6rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							background-color: #FF0000;
							font-size: 24rpx;
							color: #ffffff;
						}
					}
				}

				.label_num2 {
					display: flex;
					justify-content: space-between;
					width: 100%;

					.num {
						width: 5em;
					}

					// .lable2{
					// 	max-width: calc(100% - 6em);
					// }
				}

				.label_num3 {
					margin-top: 16rpx;
				}
			}

			.label {
				margin-top: 16rpx;

				text {
					display: inline-block;
					padding: 3rpx 14rpx;
					border: 2rpx solid #fe0200;
					border-radius: 8rpx;
					font-size: 18rpx;
					line-height: 24rpx;
					color: #fe0200;
					margin-right: 15rpx;

					&:last-child {
						margin-right: 0;
					}
				}
			}
		}


	}

	.house_row {
		margin: 0 auto;
		width: 616rpx;
		padding: 26rpx 18rpx;
		box-sizing: border-box;
		background: #f6f7fb;
		border-radius: 8px;

		.row {
			font-size: 24rpx;
			line-height: 34rpx;
			color: #666;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:first-child {
				margin-bottom: 10rpx;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}

			>view {
				width: calc(100% - 50rpx);

				.area {
					margin-left: 20rpx;
					position: relative;

					&::before {
						content: '2';
						top: -6rpx;
						position: absolute;
						right: -13rpx;
						font-size: 24rpx;
						transform: scale(0.7);
					}
				}
			}
		}
	}
	.offer_btn{
		width: 500rpx;
		margin-left: 25rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: $theme;
		border-radius: 40rpx;
		font-size: 30rpx;
		color:#fff;
		font-weight: 700;
		text-align: center;
	}
	button[loading]::before{
		align-self:center
	}
	button{
		display: flex;
		justify-content: center;
		align-item:center;
		padding: 0;
	}
	button::after{
		border: none;
	}
</style>
